<template>
  <div class="referee-home">
    <!-- 个人信息展示区 -->
    <el-card class="personal-info-card" shadow="hover">
      <div class="personal-info">
        <div class="avatar-container">
          <el-avatar :size="80" :src="refereeInfo.avatar" :alt="refereeInfo.name">
            {{ refereeInfo.name.charAt(0) }}
          </el-avatar>
          <div class="user-info">
            <h2>{{ refereeInfo.name }}</h2>
            <p class="title">{{ refereeInfo.level }}裁判 · {{ refereeInfo.specialty }}</p>
            <div class="contact-info">
              <span><i class="el-icon-user"></i> 工号：{{ refereeInfo.workId }}</span>
              <span><i class="el-icon-phone"></i> {{ refereeInfo.phone }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 工作统计卡片区 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon today-icon">
              <i class="el-icon-time"></i>
            </div>
            <div class="stat-info">
              <h3>今日场次</h3>
              <p>{{ todayMatches }}</p>
              <span class="stat-desc">场比赛</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon total-icon">
              <i class="el-icon-data-board"></i>
            </div>
            <div class="stat-info">
              <h3>总执裁场次</h3>
              <p>{{ totalMatches }}</p>
              <span class="stat-desc">场历史</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon pending-icon">
              <i class="el-icon-warning"></i>
            </div>
            <div class="stat-info">
              <h3>待执裁</h3>
              <p>{{ pendingMatches }}</p>
              <span class="stat-desc">场比赛</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon rating-icon">
              <i class="el-icon-star-on"></i>
            </div>
            <div class="stat-info">
              <h3>平均评分</h3>
              <p>{{ averageRating }}</p>
              <span class="stat-desc">分/5分</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区 -->
    <el-row :gutter="20" class="main-content">
      <!-- 今日赛程 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="content-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>今日赛程</h3>
              <el-button type="text" @click="refreshSchedule">刷新</el-button>
            </div>
          </template>
          <div class="schedule-list" v-loading="scheduleLoading">
            <div
              v-for="(match, index) in todaySchedule"
              :key="index"
              class="schedule-item"
              :class="getScheduleItemClass(match.status)">
              <div class="schedule-time">
                <div class="time">{{ match.time }}</div>
                <div class="status-badge">
                  <el-tag :type="getMatchStatusType(match.status)" size="small">
                    {{ match.status }}
                  </el-tag>
                </div>
              </div>
              <div class="schedule-content">
                <h4>{{ match.project }}</h4>
                <div class="match-info">
                  <span class="venue"><i class="el-icon-location"></i> {{ match.venue }}</span>
                  <span class="duration" v-if="match.duration">预计时长：{{ match.duration }}</span>
                </div>
              </div>
              <div class="schedule-actions">
                <el-button
                  v-if="match.status === '待开始'"
                  type="primary"
                  size="mini"
                  @click="startMatch(match)">
                  开始执裁
                </el-button>
                <el-button
                  v-if="match.status === '进行中'"
                  type="success"
                  size="mini"
                  @click="enterScore(match)">
                  录入成绩
                </el-button>
                <el-button
                  v-if="match.status === '已完成'"
                  type="info"
                  size="mini"
                  @click="viewMatchDetail(match)">
                  查看详情
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 历史执裁记录 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="content-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>历史执裁记录</h3>
              <el-button type="text" @click="viewAllRecords">查看全部</el-button>
            </div>
          </template>
          <div class="record-list" v-loading="recordsLoading">
            <div
              v-for="(record, index) in recentRecords"
              :key="index"
              class="record-item"
              @click="viewRecordDetail(record)">
              <div class="record-date">
                <div class="date">{{ formatDate(record.date) }}</div>
                <div class="rating" v-if="record.rating">
                  <el-rate
                    v-model="record.rating"
                    disabled
                    text-color="#ff9900"
                    show-score>
                  </el-rate>
                </div>
              </div>
              <div class="record-content">
                <h4>{{ record.project }}</h4>
                <div class="record-info">
                  <span class="role">{{ record.role }}</span>
                  <span class="participants">{{ record.participants }}名参赛者</span>
                </div>
              </div>
              <div class="record-status">
                <el-tag :type="getRecordStatusType(record.status)" size="small">
                  {{ record.status }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 成绩录入区域 -->
    <el-row :gutter="20" class="score-section">
      <el-col :span="24">
        <el-card class="content-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>近期成绩录入</h3>
              <el-button type="text" @click="viewAllScores">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentScores" style="width: 100%" v-loading="scoresLoading">
            <el-table-column prop="project" label="项目" width="150">
              <template #default="scope">
                <div class="project-name">{{ scope.row.project }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="athlete" label="运动员" width="120">
              <template #default="scope">
                <div class="athlete-name">{{ scope.row.athlete }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="成绩" width="100" align="center">
              <template #default="scope">
                <div class="score-value">{{ scope.row.score }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="录入时间" width="140" align="center">
              <template #default="scope">
                <div class="entry-time">{{ scope.row.time }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="scope">
                <el-tag :type="getScoreStatusType(scope.row.status)" size="small">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" fixed="right">
              <template #default="scope">
                <el-button-group size="mini">
                  <el-button type="primary" icon="el-icon-edit" @click="editScore(scope.row)">
                    编辑
                  </el-button>
                  <el-button type="success" icon="el-icon-view" @click="viewScoreDetail(scope.row)">
                    详情
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作区域 -->
    <el-row :gutter="20" class="quick-actions-row">
      <el-col :span="24">
        <el-card class="content-card quick-actions-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>快捷操作</h3>
            </div>
          </template>
          <div class="quick-actions">
            <div class="action-item" @click="scoreEntry">
              <div class="action-icon score-icon">
                <i class="el-icon-edit"></i>
              </div>
              <h4>成绩录入</h4>
              <p>录入比赛成绩</p>
            </div>
            <div class="action-item" @click="scheduleView">
              <div class="action-icon schedule-icon">
                <i class="el-icon-date"></i>
              </div>
              <h4>查看赛程</h4>
              <p>查看完整赛程</p>
            </div>
            <div class="action-item" @click="athletesList">
              <div class="action-icon athletes-icon">
                <i class="el-icon-user-solid"></i>
              </div>
              <h4>运动员名单</h4>
              <p>查看参赛人员</p>
            </div>
            <div class="action-item" @click="printScores">
              <div class="action-icon print-icon">
                <i class="el-icon-printer"></i>
              </div>
              <h4>打印成绩单</h4>
              <p>打印比赛成绩</p>
            </div>
            <div class="action-item" @click="emergencyContact">
              <div class="action-icon emergency-icon">
                <i class="el-icon-phone-outline"></i>
              </div>
              <h4>紧急联系</h4>
              <p>联系相关人员</p>
            </div>
            <div class="action-item" @click="workReport">
              <div class="action-icon report-icon">
                <i class="el-icon-document"></i>
              </div>
              <h4>工作报告</h4>
              <p>提交工作总结</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'RefereeHome',
  setup() {
    const router = useRouter()

    // 裁判信息
    const refereeInfo = reactive({
      name: '李老师',
      workId: 'R001',
      specialty: '田径',
      level: '国家级',
      phone: '139****8765',
      avatar: ''
    })

    // 统计数据
    const todayMatches = ref(3)
    const totalMatches = ref(28)
    const pendingMatches = ref(2)
    const averageRating = ref(4.8)

    // 加载状态
    const scheduleLoading = ref(false)
    const recordsLoading = ref(false)
    const scoresLoading = ref(false)

    // 今日赛程
    const todaySchedule = ref([
      {
        id: 1,
        time: '09:00',
        project: '男子100米预赛',
        venue: '田径场1道',
        status: '已完成',
        duration: '2小时'
      },
      {
        id: 2,
        time: '10:30',
        project: '女子跳远决赛',
        venue: '沙坑A',
        status: '进行中',
        duration: '1.5小时'
      },
      {
        id: 3,
        time: '14:00',
        project: '男子铅球预赛',
        venue: '投掷区',
        status: '待开始',
        duration: '2小时'
      }
    ])

    // 历史执裁记录
    const recentRecords = ref([
      {
        id: 1,
        project: '男子1500米决赛',
        date: '2025-10-10',
        role: '主裁判',
        participants: 12,
        status: '已完成',
        rating: 5
      },
      {
        id: 2,
        project: '女子跳高决赛',
        date: '2025-10-09',
        role: '副裁判',
        participants: 8,
        status: '已完成',
        rating: 4
      },
      {
        id: 3,
        project: '男子4×100米接力',
        date: '2025-10-08',
        role: '计时员',
        participants: 16,
        status: '已完成',
        rating: 5
      }
    ])

    // 近期成绩录入
    const recentScores = ref([
      {
        id: 1,
        project: '男子100米预赛',
        athlete: '张三',
        score: '11.23s',
        time: '09:45',
        status: '已确认'
      },
      {
        id: 2,
        project: '女子跳远决赛',
        athlete: '李四',
        score: '5.67m',
        time: '10:15',
        status: '已确认'
      },
      {
        id: 3,
        project: '男子100米预赛',
        athlete: '王五',
        score: '11.45s',
        time: '09:50',
        status: '待确认'
      }
    ])

    // 方法
    const getMatchStatusType = (status) => {
      const types = {
        '待开始': 'warning',
        '进行中': 'primary',
        '已完成': 'success'
      }
      return types[status] || 'info'
    }

    const getRecordStatusType = (status) => {
      const types = {
        '已完成': 'success',
        '进行中': 'primary',
        '已取消': 'info'
      }
      return types[status] || 'info'
    }

    const getScoreStatusType = (status) => {
      const types = {
        '已确认': 'success',
        '待确认': 'warning',
        '有异议': 'danger'
      }
      return types[status] || 'info'
    }

    const getScheduleItemClass = (status) => {
      return `schedule-item-${status.toLowerCase().replace('待', 'pending').replace('进行中', 'active').replace('已完成', 'completed')}`
    }

    const formatDate = (dateStr) => {
      const date = new Date(dateStr)
      return `${date.getMonth() + 1}月${date.getDate()}日`
    }

    // 操作方法
    const startMatch = (match) => {
      ElMessage.success(`开始执裁：${match.project}`)
      match.status = '进行中'
    }

    const enterScore = (match) => {
      router.push(`/score-entry?matchId=${match.id}`)
    }

    const viewMatchDetail = (match) => {
      router.push(`/match-detail/${match.id}`)
    }

    const viewRecordDetail = (record) => {
      router.push(`/record-detail/${record.id}`)
    }

    const editScore = (score) => {
      router.push(`/score-edit/${score.id}`)
    }

    const viewScoreDetail = (score) => {
      router.push(`/score-detail/${score.id}`)
    }

    const refreshSchedule = async () => {
      scheduleLoading.value = true
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('赛程已刷新')
      } catch (error) {
        ElMessage.error('刷新失败')
      } finally {
        scheduleLoading.value = false
      }
    }

    const viewAllRecords = () => {
      router.push('/referee-records')
    }

    const viewAllScores = () => {
      router.push('/scores')
    }

    // 快捷操作方法
    const scoreEntry = () => {
      router.push('/score-entry')
    }

    const scheduleView = () => {
      router.push('/schedule')
    }

    const athletesList = () => {
      router.push('/athletes')
    }

    const printScores = () => {
      ElMessage.success('成绩单打印中...')
    }

    const emergencyContact = () => {
      ElMessage.warning('紧急联系人：体育组 - 123456789')
    }

    const workReport = () => {
      router.push('/work-report')
      ElMessage.info('工作报告功能开发中...')
    }

    // 生命周期
    onMounted(() => {
      // 初始化数据加载
      // 裁判首页初始化完成
    })

    return {
      refereeInfo,
      todayMatches,
      totalMatches,
      pendingMatches,
      averageRating,
      scheduleLoading,
      recordsLoading,
      scoresLoading,
      todaySchedule,
      recentRecords,
      recentScores,
      getMatchStatusType,
      getRecordStatusType,
      getScoreStatusType,
      getScheduleItemClass,
      formatDate,
      startMatch,
      enterScore,
      viewMatchDetail,
      viewRecordDetail,
      editScore,
      viewScoreDetail,
      refreshSchedule,
      viewAllRecords,
      viewAllScores,
      scoreEntry,
      scheduleView,
      athletesList,
      printScores,
      emergencyContact,
      workReport
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.referee-home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 个人信息卡片 */
.personal-info-card {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
}

.personal-info {
  padding: 10px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info h2 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 24px;
}

.user-info .title {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 16px;
}

.contact-info {
  display: flex;
  gap: 20px;
  color: #909399;
  font-size: 14px;
}

.contact-info span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 统计卡片 */
.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.today-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.total-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.pending-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.rating-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-info h3 {
  margin: 0 0 5px 0;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
}

.stat-info p {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 28px;
  font-weight: bold;
}

.stat-info .stat-desc {
  color: #909399;
  font-size: 12px;
}

/* 内容卡片 */
.content-card {
  border-radius: 12px;
  height: 100%;
  margin-bottom: 20px;
}

.main-content {
  margin-bottom: 20px;
}

.score-section {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

/* 赛程列表 */
.schedule-list {
  max-height: 400px;
  overflow-y: auto;
}

.schedule-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 10px;
}

.schedule-item:hover {
  background-color: #f8f9fa;
}

.schedule-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.schedule-item-pending {
  border-left: 4px solid #E6A23C;
}

.schedule-item-active {
  border-left: 4px solid #409EFF;
  background-color: #f0f8ff;
}

.schedule-item-completed {
  border-left: 4px solid #67C23A;
}

.schedule-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  padding-right: 15px;
  border-right: 1px solid #f0f0f0;
}

.schedule-time .time {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.schedule-content {
  flex: 1;
  padding: 0 15px;
}

.schedule-content h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.match-info {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #909399;
  font-size: 13px;
}

.match-info span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.schedule-actions {
  flex-shrink: 0;
  padding-left: 15px;
}

/* 历史记录列表 */
.record-list {
  max-height: 400px;
  overflow-y: auto;
}

.record-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 10px;
}

.record-item:hover {
  background-color: #f8f9fa;
}

.record-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.record-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  padding-right: 15px;
  border-right: 1px solid #f0f0f0;
}

.record-date .date {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.record-content {
  flex: 1;
  padding: 0 15px;
}

.record-content h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.record-info {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #909399;
  font-size: 13px;
}

.record-info .role {
  color: #409EFF;
}

.record-status {
  flex-shrink: 0;
  padding-left: 15px;
}

/* 成绩表格 */
.project-name,
.athlete-name {
  font-weight: 500;
  color: #303133;
}

.score-value {
  font-weight: bold;
  color: #409EFF;
  font-size: 15px;
}

.entry-time {
  color: #909399;
  font-size: 13px;
}

/* 快捷操作 */
.quick-actions-card {
  margin-bottom: 20px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 10px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
}

.action-item:hover {
  background-color: #e9ecef;
  transform: translateY(-3px);
}

.action-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-bottom: 15px;
}

.score-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.schedule-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.athletes-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.print-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.emergency-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.report-icon {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.action-item h4 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

.action-item p {
  margin: 0;
  color: #606266;
  font-size: 13px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .referee-home {
    padding: 10px;
  }

  .avatar-container {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .contact-info {
    flex-direction: column;
    gap: 8px;
  }

  .stat-content {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .stat-info p {
    font-size: 24px;
  }

  .schedule-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .schedule-time {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
  }

  .schedule-content {
    padding: 10px 0;
  }

  .schedule-actions {
    padding-left: 0;
    width: 100%;
  }

  .schedule-actions .el-button {
    width: 100%;
  }

  .record-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .record-date {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
  }

  .record-content {
    padding: 10px 0;
  }

  .record-status {
    padding-left: 0;
    width: 100%;
  }

  .quick-actions {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 5px;
  }

  .action-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .action-item h4 {
    font-size: 14px;
  }

  .action-item p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .stats-row .el-col {
    margin-bottom: 10px;
  }

  .main-content .el-col {
    margin-bottom: 15px;
  }

  .match-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .record-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

/* 滚动条样式 */
.schedule-list::-webkit-scrollbar,
.record-list::-webkit-scrollbar {
  width: 6px;
}

.schedule-list::-webkit-scrollbar-track,
.record-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.schedule-list::-webkit-scrollbar-thumb,
.record-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.schedule-list::-webkit-scrollbar-thumb:hover,
.record-list::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>